import React from 'react'
// ===================================================================== Temp
import TableModal from '#cpt/temp/TableModal'
import Controls from '#cpt/temp/Controls'
// ===================================================================== global declare
const { $fn, $Lazy } = window
// ===================================================================== Lazy
const Title = $Lazy.load(()=>import('#tp/title/title-small'))
const Button = $Lazy.load(()=>import('@antd/button'))
const Table = $Lazy.load(()=>import('@antd/table'))
// ===================================================================== component
class Index extends React.Component{
	state = {
		data:[],
		selectedKeys:[],
		selectedKeys2: [],
		selectedRows: [],
		forms : [
			{ label: '药物名称',		name: 'drug_name',	width:200 },
		]
	}
	
	model = {}
	clearKeys = false
	
	componentDidMount(){
		
	}
	
	// paging
	fetch = (param, callback) => $fn.fetch.call(this,'drug-sensitivity/index', param)
	// 打开弹窗并传递参数
	open = (uuid, look) => {
		this.modal.open()
		this.uuid = uuid
		const { selectedRows } = this.state
		this.setState({ pullLoading: true, look }, () => {
			if(look){ // 仅查看
				this.backShow(uuid)
			}else{
				this.fetch().then(data=> {
					if(!$fn.hasArray(selectedRows)){
						this.backShow(uuid)
					}
				} )
			}
		})
	}
	// 回显
	backShow = uuid => {
		let { selectedKeys } = this.state
		window.$http.submit(this,'drug-group/infoDrug', { param:{ uuid }, loading:false, submitLoading:'pullLoading'}).then(data=>{
			this.setState({ selectedRows: data })
			
			this.selectedRows = $fn.copy(data)
			
			selectedKeys = data.map(v => v.uuid )
			this.selectedKeys = selectedKeys
			
			this.setState({  selectedKeys })
		})
	}
	
	// 表单
	cols = [
		{ title: '抗菌药物名称', dataIndex: 'drug_name' },
		{ title: '英文名称', 	dataIndex: 'name_en' },
		{ title: '描述', 		dataIndex: 'description' },
	]
	
	cols2 = [
		...this.cols,
		{ title: '操作', 		width:60, render: (text, {uuid}) => <Button label='删除' onClick={()=>this.onDel([uuid])} /> },
	]
	
	controls = ()=>{
		const { selectedKeys2 } = this.state
		return [
			Controls.click.call(this,'删除', () => this.onDel(selectedKeys2), {disabled: !$fn.hasArray(selectedKeys2)})
		]
	}
	
	// 删除
	onDel = delKeys => {
		const { selectedRows } = this.state
		let rows = $fn.copy(selectedRows)
		
		rows.forEach( (v,i) =>{
			delKeys.forEach( m => {
				if(v.uuid === m){
					rows[i] = null
				}
			} )
		})
		rows = rows.filter(v => v !== null)
		
		const keys = rows.map( v => v.uuid)
		
		this.setState({ selectedRows : rows, selectedKeys: keys,  selectedKeys2: [] })
	}
	
	render(){
		const { selectedRows, selectedKeys2, pullLoading, look } = this.state
		const TableComponent = (
			<>
				<Title title='已选药敏' className='mb10 tbor1' controls={this.controls()} />
				<Table 
					data 			= { selectedRows }
					cols 			= { this.cols2}
					loading			= { pullLoading }
					wrapClassName 	= 'mlr'
					selectedKeys	= { selectedKeys2 }
					simple
					onSelect		= { selectedKeys => this.setState({ selectedKeys2: selectedKeys })}
				/>
			</>
		)
		return (
			<>
				{
					TableModal.call(this,{ title: look ? '查看药敏' : '添加药敏', width:'60%', height: look ? '70%' : '99%', noRefresh:true,
						bodyStyle		: {padding:'0 10px 0'},
						table			: { 
										simple:true,
										selectedRows: selectedRows,
										onSelect: (selectedKeys, selectedRows) => {
											this.setState({ selectedKeys, selectedRows, selectedKeys2: [] })
										}
						},
						children		: look ? <div className='ex fv abs_full' style={{padding:'0 10px'}}>{TableComponent}</div> : null,
						close			: ()=> this.setState({ selectedKeys:[], selectedRows:[],  selectedKeys2: [], look:null }),
						suffix			: TableComponent,
						api				: 'drug-group/addDrug',
						getSubmit		: () => ( { group_id: this.uuid, uuid: selectedRows.map( v => v.uuid ) } ),
						hasOkDisabled	: false
					})
				}
			</>
		)
	}
}

export default Index